<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <div class="displays">
        <el-form-item label="生产厂家" prop="manufactureId">
          <el-select v-model="ruleForm.manufactureId" placeholder="请选择生产厂家">
            <el-option
                v-for="item in ManufactureList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型" prop="categoryIdList">
          <el-select v-model="ruleForm.categoryIdList" multiple  placeholder="请选择商品类型">
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="displays">
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品vip价格" prop="vipPrice">
          <el-input v-model="ruleForm.vipPrice"></el-input>
        </el-form-item>
      </div>
      <div class="select">
        <el-form-item label="是否缺货" prop="cargo">
          <el-switch v-model="ruleForm.cargo"></el-switch>
        </el-form-item>
        <el-form-item label="是否热销" prop="hotSales">
          <el-switch v-model="ruleForm.hotSales"></el-switch>
        </el-form-item>
        <el-form-item label="是否新品" prop="newProduct">
          <el-switch v-model="ruleForm.newProduct"></el-switch>
        </el-form-item>
      </div>
      <div class="imges">
        <el-form-item label="商品展示图" prop="dialogImageUrl">
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </div>
      <div class="imges">
        <el-form-item label="商品介绍图" prop="flatPatternmaking">
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </div>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ajax} from "@/config/product";

export default {
  name: "product",
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      ruleForm: {
        name: "",
        categoryIdList: "",
        manufactureId: "",
        cargo: false,
        hotSales: false,
        newProduct: true,
        price: '',
        vipPrice: '',
        remark: '备注',
        //商品展示图
        dialogImageUrl: [],
        //商品介绍图
        flatPatternmaking: [],
      },
      rules: {
        name: [
          {required: true, name: true, message: '请输入商品名称', trigger: 'blur'},
        ],
        categoryIdList: [
          {required: true,message: '请选择商品类型', trigger: 'change'}
        ],
        manufactureId: [
          {required: true, message: '请选择生产厂家', trigger: 'change'}
        ],
        cargo: [
          {required: true,  message: '是否缺货', trigger: 'blur'}
        ],
        hotSales: [
          {required: true,  message: '是否热销', trigger: 'blur'}
        ],
        newProduct: [
          {required: true, message: '是否新品', trigger: 'blur'}
        ],
        price: [
          {required: true, category: true, message: '请输入商品价格', trigger: 'number'}
        ],
        vipPrice: [
          {required: true, category: true, message: '请输入商品vip价格', trigger: 'number'}
        ],
        // dialogImageUrl: [
        //   {required: true, category: true, message: '请上传至少一张商品展示图', trigger: 'change'}
        // ],
      },
      categoryList:[],
      ManufactureList:[]

    };
  },
  created() {
    this.getManufacturerList()
    this.getCategoryList()
  },
  methods: {
    //类型列表查询
    getCategoryList() {
      ajax.getCategoryListApi().then(res => {
        const {data} = res
        this.categoryList = data
      })
    },
    //厂家列表查询
    getManufacturerList() {
      ajax.getManufactureListApi().then(res => {
        const {data} = res
        this.ManufactureList = data
      })
    },
    //商品展示图
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    //商品新增确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.ruleForm.newProduct=this.ruleForm.newProduct===1?0:1;
          this.ruleForm.hotSales=this.ruleForm.hotSales===1?0:1;
          this.ruleForm.cargo=this.ruleForm.cargo===1?0:1;
          console.log(this.ruleForm)
          ajax.apiProduct(this.ruleForm).then(res => {
            const {data} = res
            if (data.code=='00000'){
              this.$message.success('商品新增成功')
              this.ruleForm={
                name: "",
                category: "",
                manufacturer: "",
                cargo: false,
                hotSales: false,
                newProduct: true,
                price: '',
                vipPrice: '',
                remark: '备注',
                //商品展示图
                dialogImageUrl: [],
                //商品介绍图
                flatPatternmaking: [],
              }
            }else {
              this.$message.error('请检查输入是否正确')
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped lang="scss">
.select {
  display: flex;
  align-items: center;
}

.displays {
  display: flex;
  justify-content: space-between
}
</style>